<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="application/javascript" src="jquery.min.js"></script>
</head>
<body>
<input type="text" name="name"><br>
<div>
    <button onclick="doAjax()">ajax</button>
    <button onclick="doAjaxGet()">get</button>
    <button onclick="doAjaxGetJson()">getJson</button>
    <button onclick="doajaxPOST()">post</button>
    <button onclick="doLoad()">selecor.load</button>

</div>
<span></span>
<script>
    function doLoad(){
        $("span").load("http://localhost:8081/doLoad"
            ,JSON.stringify({"id":"1","name":"姿姿态","letter":"z"})
            ,function(result){
            $("span").html(result);
        });
    }


    function doAjax() {
        var name = $("[name=name]").val();
        $.ajax({
            url:"http://localhost:8081/doAjax",
            data:"value="+name,
            success:function (result) {
                $("span").html(result);
            }
        })
    }


    function doAjaxGet(){
        $.get("http://localhost:8081/doGet","",function(map){
            console.log(map);
        })
    }

    function doAjaxGetJson(){
        $.get("http://localhost:8081/doGet","",function(map){
            console.log(map);
        },"json")
    }

    function doAjaxPost(){
        $.post("http://localhost:8081/doPost","id=1&name=姿姿态&letter=z",function(result){
            $("span").html(result);
        })
    }

    function doajaxPOST() {
       $.ajax({
           type:"POST",
           url:"http://localhost:8081/doPost",
           data:JSON.stringify({"id":"1","name":"姿姿态","letter":"z"}),
           async:true,
           contentType:"application/json",
           success:function(result){
               $("span").html(result);
           }
       })
    }
</script>

</body>
</html>